<template>
  <zh-form-item
    :desc="props.desc"
    :layout="props.layout"
    :required="props.required"
    :label="props.label"
    :field="props.field"
    :rules="props.rules"
    :margin="props.margin"
    :padding="props.padding"
    :parentClass="props.parentClass"
    :align="props.align"
    :help="props.help"
    :border="props.border"
    :showError="props.showError"
    :requiredTitleChangeColor="props.requiredTitleChangeColor"
    :transprent="true"
    :round="props.round"
  >
    <view style="width: 100%">
      <zh-input
        v-bind="allAttrs"
        :inputPadding="[10, 0]"
        _style="{width: '100%'}"
        :align="props.inputAlign ? props.inputAlign : zhFormInputAlign"
        :transprent="props.transprent !== null ? props.transprent : zhFormTransprent"
        v-model="_value"
        :prefix="props.prefix"
        :showBottomBotder="false"
		:type="props.type"
        @input="onInput"
        @clear="onClear"
        @focus="focus"
        @blur="blur"
        @search="searchClick"
        @confirm="confirm"
        @keyboardheightchange="emits('keyboardheightchange')"
      >
        <template #right >
          <slot name="right" ></slot>
        </template>
      </zh-input>
    </view>
  </zh-form-item>
</template>

<script lang="ts" setup>
import { computed, watch, PropType, useAttrs, ref, getCurrentInstance, onUnmounted, Ref, inject, isProxy, toRaw, ComputedRef, onMounted, nextTick } from 'vue';
import { rulesItem } from './../zh-form-item/interface';
const props = defineProps({
  parentClass: {
    type: String,
    default: '',
  },
  align: {
    type: String,
    default: '',
  },
  inputAlign: {
    type: String,
    default: '',
  },
  label: {
    type: String,
    default: '',
  },
  //表单描述
  desc: {
    type: String,
    default: '',
  },
  layout: {
    type: String as PropType<'vertical' | 'horizontal'>,
    default: '',
  },
  field: {
    type: String,
    default: '',
  },
  //表彰底部的单项注意说明。
  help: {
    type: String,
    default: '',
  },
  //是否必填
  required: {
    type: Boolean,
    default: false,
  },
  //检验规则
  rules: {
    type: [Object, Array] as PropType<Array<rulesItem> | rulesItem>,
    default: () => {
      return [{ validator: false, required: false }];
    },
  },
  margin: {
    type: Array as PropType<Array<number>>,
    default: () => [0, 0],
  },
  padding: {
    type: Array as PropType<Array<number>>,
    default: () => [0, 0],
  },
  //显示下划线。
  border: {
    type: Boolean,
    default: null,
  },
  showError: {
    type: Boolean,
    default: true,
  },
  //校验不通过时，是否让标题跟着变化文字颜色，默认是。
  requiredTitleChangeColor: {
    type: Boolean,
    default: false,
  },
  transprent: {
    type: [Boolean, String],
    default: null,
  },
  round: {
    type: Number,
    default: 0,
  },
  modelValue: {
    type: [Number, String, Boolean, Array],
    default: undefined,
  },
  //前缀图标
  prefix: {
    type: String,
    default: '',
  },
  extend: {
    // 扩展属性，对象形式，存放组件的扩展属性
    type: Object,
    default: () => {
      return {};
    },
  },
  type:{
    type: String,
    default: 'text',
  },
});
const attrs = useAttrs();
const allAttrs = computed(() => {
  return Object.assign(props.extend, attrs);
});
const emits = defineEmits(['update:modelValue', 'focus', 'blur', 'confirm', 'input', 'clear', 'search', 'keyboardheightchange']);
const _value = ref(props.modelValue);
const zhFormInputAlign = inject(
  'zhFormInputAlign',
  computed(() => 'left')
);
const zhFormTransprent = inject(
  'zhFormTransprent',
  computed(() => false)
);
const onInput = (e: any) => {
  emits('update:modelValue', e);
  emits('input', e);
};
const onClear = () => {
  emits('clear');
};
function focus() {
  emits('focus');
}
function blur(e: any) {
  emits('blur', e);
}
function confirm() {
  emits('confirm', _value.value);
}
function searchClick() {
  emits('search', _value.value);
}
watch(
  () => _value,
  (val) => {
    emits('update:modelValue', val.value);
  },
  {
    deep: true,
  }
);
watch(
  () => props.modelValue,
  (val) => {
    _value.value = val;
  },
  {
    deep: true,
  }
);
</script>

<style></style>
